<!--
 * @Descripttion: 商品管理-新建/编辑
 * @Author: 何伟伦 weilun@ssc-hn.com
 * @Date: 2024-04-10
 * @LastEditors: 何伟伦 weilun@ssc-hn.com
 * @LastEditTime: 2024-04-25
-->
<script lang="ts" setup>
  import { ArrowLeftOutlined } from '@ant-design/icons-vue'
  import { message } from 'ant-design-vue'
  import { onMounted, ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router'

  import { requestAddGoods, requestGetDetailGoods, requestUpdateGoods } from '/@/api/business/tracecode/goods'
  import { HttpCodeEnum } from '/@/enums/httpEnum'

  const router = useRouter()
  const route = useRoute()
  const { id } = route.query

  const loading = ref<boolean>(false)
  const formRef = ref()
  const formState = ref<any>({
    goodsName: null,
    notes: null,
    goodId: null,
  })

  const rules = {
    goodsName: [{ required: true, message: '请输入商品名称' }],
  }
  /**
   * 回退页面
   */
  const pageBack = () => {
    router.replace({
      path: '/code/productManage/list',
    })
  }
  /**
   * 获取商品详情（编辑）
   */
  const getDetail = async () => {
    loading.value = true
    const { responseCode, responseData } = await requestGetDetailGoods({
      goodId: id as string,
    })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      const { goodsName, notes, goodId } = responseData
      loading.value = false
      formState.value.goodsName = goodsName
      formState.value.notes = notes
      formState.value.goodId = goodId
    }
  }

  /**
   * 保存
   */
  const submit = async () => {
    formRef.value
      .validate()
      .then(async () => {
        loading.value = true
        const action = id ? requestUpdateGoods({ ...formState.value }) : requestAddGoods({ ...formState.value })
        const { responseCode } = await action
        loading.value = false
        if (responseCode === HttpCodeEnum.SUCCESS) {
          message.success(`${id ? '编辑' : '新增'}商品成功`)
          router.back()
        }
      })
      .catch((res) => {
        console.log('catch: ', res)
      })
  }
  onMounted(() => {
    if (id) getDetail()
  })
</script>

<template>
  <div class="product-edit-add">
    <div class="product-header">
      <arrow-left-outlined :style="{ 'font-weight': 'bold', 'margin-right': '18px' }" @click="pageBack()" />
      <span>{{ id ? '编辑' : '新增' }}商品</span>
    </div>
    <a-divider />
    <div class="product-form-box">
      <a-form :model="formState" :rules="rules" layout="vertical" ref="formRef" name="add_form" labelAlign="left">
        <a-form-item label="商品名称" name="goodsName">
          <a-input v-model:value="formState.goodsName" allow-clear :maxlength="20" />
        </a-form-item>
        <a-form-item label="备注" name="notes">
          <a-textarea :rows="3" v-model:value="formState.notes" allow-clear showCount :maxlength="200" />
        </a-form-item>
        <a-form-item label="">
          <a-button type="primary" @click="submit" :loading="loading">保存</a-button>
          <a-button style="margin-left: 10px" @click="router.back()" :loading="loading">取消</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .product-edit-add {
    background: #fff;
    padding-bottom: 32px;

    .product-header {
      font-size: 18px;
      font-weight: 500;
      color: #000;
      padding: 22px 0 0 26px;
    }

    .product-form-box {
      width: 80%;
      margin: 24px auto;
    }
  }
</style>
